<template>
  <div class="coupon-list">
    <div v-if="coupons.length === 0" class="empty-coupons">
      <van-empty description="暂无优惠券" />
    </div>
    
    <div v-else class="coupons">
      <div 
        v-for="coupon in coupons" 
        :key="coupon.id" 
        class="coupon-item"
        :class="{ expired: coupon.status === 'expired', used: coupon.status === 'used' }"
      >
        <div class="coupon-content">
          <div class="coupon-left">
            <div class="coupon-amount">
              <span class="symbol">¥</span>
              <span class="number">{{ coupon.amount }}</span>
            </div>
            <div class="coupon-condition">满{{ coupon.condition }}可用</div>
          </div>
          <div class="coupon-right">
            <div class="coupon-title">{{ coupon.title }}</div>
            <div class="coupon-desc">{{ coupon.description }}</div>
            <div class="coupon-time">{{ coupon.validTime }}</div>
            <div class="coupon-status">
              <van-tag :type="getStatusType(coupon.status)">
                {{ getStatusText(coupon.status) }}
              </van-tag>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// 定义 props
const props = defineProps({
  coupons: {
    type: Array,
    default: () => []
  }
})

// 获取状态类型
const getStatusType = (status) => {
  const typeMap = {
    available: 'success',
    used: 'default',
    expired: 'default'
  }
  return typeMap[status] || 'default'
}

// 获取状态文本
const getStatusText = (status) => {
  const textMap = {
    available: '可使用',
    used: '已使用',
    expired: '已过期'
  }
  return textMap[status] || '未知'
}
</script>

<style lang="scss" scoped>
.coupon-list {
  padding: 10px;
}

.empty-coupons {
  padding: 40px 0;
}

.coupon-item {
  background: #fff;
  border-radius: 8px;
  margin-bottom: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  
  &.expired,
  &.used {
    opacity: 0.6;
    
    .coupon-content {
      background: #f5f5f5;
    }
  }
}

.coupon-content {
  display: flex;
  background: linear-gradient(135deg, #ff6b6b 0%, #ff8e8e 100%);
  color: #fff;
  padding: 15px;
  
  .coupon-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 100px;
    border-right: 1px dashed rgba(255, 255, 255, 0.3);
    padding-right: 15px;
    
    .coupon-amount {
      display: flex;
      align-items: baseline;
      margin-bottom: 5px;
      
      .symbol {
        font-size: 16px;
        margin-right: 2px;
      }
      
      .number {
        font-size: 32px;
        font-weight: bold;
      }
    }
    
    .coupon-condition {
      font-size: 12px;
      opacity: 0.8;
    }
  }
  
  .coupon-right {
    flex: 1;
    padding-left: 15px;
    
    .coupon-title {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 5px;
    }
    
    .coupon-desc {
      font-size: 12px;
      opacity: 0.8;
      margin-bottom: 5px;
    }
    
    .coupon-time {
      font-size: 12px;
      opacity: 0.8;
      margin-bottom: 10px;
    }
    
    .coupon-status {
      display: flex;
      justify-content: flex-end;
    }
  }
}
</style> 